<script setup lang="ts">
import { computed } from 'vue';
import { useRouterPush } from '@/composables';
import { useLogout, useImage } from '@/hooks';
import { useNursesStore } from '@/store';
import { storeToRefs } from 'pinia';

const { nurseNurses } = storeToRefs(useNursesStore());

const { toNursesMine } = useRouterPush();

const pathList = [
    {
        to: () => { },
        text: '我的订单',
        icon: 'i-local-transaction-order'
    },
    {
        to: () => { },
        text: '我的预约',
        icon: 'i-local-reservation'
    }
];
const Icon = computed(() => (_icon: string) => `${_icon} w-36px h-36px`);
</script>
<template>
    <basic-layout>
        <!-- <custom-navbar title="个人中心" /> -->
        <view class="w-375px text-primary flex-col-center justify-start">
            <view class="w-375px flex-center h-80px bg-gradient-to-bl from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70">
                <view class="ml-3 w-4/5 h-full flex justify-start items-center">
                    <view class="">
                        <nut-avatar size="large">
                            <img :src="useImage(nurseNurses?.avatar || '')" />
                        </nut-avatar>
                    </view>
                    <view class="ml-2 flex-col-center items-start">
                        <view class="flex justify-between items-center">
                            <view class="text-lg">{{ nurseNurses?.name }}</view>
                        </view>
                        <view class="font-bold">
                            <text class="text-white">{{ nurseNurses?.phone }}</text>
                        </view>
                    </view>
                </view>
                <view class="w-1/5 h-full flex-center" @click="toNursesMine">
                    <view class="i-local-settings-account text-white w-40px h-40px"></view>
                </view>
            </view>

            <view class="w-350px bg-#fff mt-2 shadow b-rounded-3">
                <view v-for="(item, index) in pathList" class="flex h-60px w-auto flex-col-center">
                    <view class="flex-center w-full h-full" @click="item.to">
                        <view class="w-5/6 h-full flex justify-start items-center">
                            <view class="ml-2">
                                <view :class="Icon(item.icon)" />
                            </view>
                            <view class="ml-2 flex-col-center items-start text-lg">
                                {{ item.text }}
                            </view>
                        </view>
                        <view class="w-1/6 h-full flex-center">
                            <view class="i-local-right-bold w-24px h-24px"></view>
                        </view>
                    </view>
                    <view v-if="index !== pathList.length - 1" class="w-340px b-b-solid b-b-1"></view>
                </view>
            </view>
        </view>
        <basic-button text="退出登录" class="mb-15 m-t-2" @click="useLogout" />
    </basic-layout>
</template>
